import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
import { useDheader } from "../store/Dheader";
import { useDaside } from "../store/Daside";
import i18n from "../locals/index";
import RouteOrient from "../common/api/routeOrient";
import NProgress from "nprogress";
import "nprogress/nprogress.css";
const { t } = i18n.global;
NProgress.configure({
  easing: "ease", // 动画方式
  speed: 500, // 递增进度条的速度
  showSpinner: false, // 是否显示加载ico
  trickleSpeed: 200, // 自动递增间隔
  minimum: 0.3, // 初始化时的最小百分比
});
const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "/",
    redirect: (to) => {
      return { path: "/blog/article" };
    },
  },
  {
    path: "/login",
    name: "login",
    component: () => import("../views/Dlogin.vue"),
  },
  {
    path: "/home",

    component: () => import("../views/Dmain.vue"),
    children: [
      {
        path: "",
        name: "home",
        component: () => import("../views/Dhome.vue"),
      },
    ],
  },
  {
    path: "/test",
    component: () => import("../views/Dmain.vue"),
    children: [
      { path: "", name: "test", component: () => import("../views/test.vue") },
    ],
  },
  {
    path: "/editor",
    name: "editor",
    component: () => import("../views/Dmain.vue"),
    children: [
      {
        path: "code",
        name: "code",
        component: () => import("../components/editor/code/code.vue"),
      },
      {
        path: "chart",
        name: "chart",
        component: () => import("../components/editor/chart/chart.vue"),
      },
      {
        path: "excel",
        name: "excel",
        component: () => import("../components/editor/execl/excel.vue"),
      },
      {
        path: "text",
        name: "text",
        component: () => import("../components/editor/text/text.vue"),
      },
    ],
  },
  {
    path: "/component",
    name: "component",
    component: () => import("../views/Dmain.vue"),
    children: [],
  },
  {
    path: "/tools",
    name: "tools",
    component: () => import("../views/Dmain.vue"),
    children: [
      {
        path: "bookmark",
        name: "bookmark",
        component: () => import("../components/tools/bookmark/bookmark.vue"),
      },
      {
        path: "player",
        name: "player",
        children: [
          {
            path: "musicplayer",
            name: "musicplayer",
            component: () =>
              import("../components/tools/player/musicplayer.vue"),
          },
          {
            path: "videoplayer",
            name: "videoplayer",
            component: () =>
              import("../components/tools/player/videoplayer.vue"),
          },
        ],
      },
      {
        path: "others",
        name: "others",
        component: () => import("../components/others.vue"),
      },
    ],
  },
  {
    path: "/blog",
    component: () => import("../views/Dmain.vue"),
    children: [
      {
        path: "page",
        name: "page",
        component: () => import("../components/blog/page/page.vue"),
      },
      {
        path: "article",
        name: "article",
        component: () => import("../components/blog/article/article.vue"),
      },
      {
        path: "markdown",
        name: "markdown",
        component: () => import("../components/blog/markdown/markdown.vue"),
      },
    ],
  },
  {
    path: "/database",
    name: "database",
    component: () => import("../views/Dmain.vue"),
    children: [
      {
        path: "mysql",
        name: "mysql",
        component: () => import("../components/database/mysql/mysql.vue"),
      },
      {
        path: "redis",
        name: "redis",
        component: () => import("../components/database/redis/redis.vue"),
      },
      {
        path: "mongodb",
        name: "mongodb",
        component: () => import("../components/database/mongodb/mongodb.vue"),
      },
    ],
  },
  {
    path: "/data",
    name: "data",
    component: () => import("../views/Dmain.vue"),
    children: [
      {
        path: "collection",
        name: "collection",
        component: () => import("../components/data/collection.vue"),
      },
      {
        path: "processing",
        name: "processing",
        component: () => import("../components/data/processing.vue"),
      },
      {
        path: "mining",
        name: "mining",
        component: () => import("../components/data/mining.vue"),
      },
    ],
  },
  {
    path: "/system",
    component: () => import("../views/Dmain.vue"),
    children: [
      {
        path: "permission",
        name: "permission",
        component: () =>
          import("../components/system/permission/permission.vue"),
      },
      {
        path: "user",
        name: "user",
        component: () => import("../components/system/user/user.vue"),
      },
      {
        path: "department",
        name: "department",
        component: () =>
          import("../components/system/department/department.vue"),
      },
      {
        path: "dictionary",
        name: "dictionary",
        component: () =>
          import("../components/system/dictionary/dictionary.vue"),
      },
      {
        path: "file",
        name: "file",
        component: () => import("../components/system/file/file.vue"),
      },
    ],
  },
  {
    path: "/log",
    component: () => import("../views/Dmain.vue"),
    children: [
      {
        path: "",
        name: "log",
        component: () => import("../components/log/log.vue"),
      },
    ],
  },
  {
    path: "/about",
    component: () => import("../views/Dmain.vue"),
    children: [
      {
        path: "",
        name: "about",
        component: () => import("../components/about/about.vue"),
      },
    ],
  },
  {
    path: "/error",
    component: () => import("../views/Dmain.vue"),
    children: [
      {
        path: "",
        redirect: "/error/404",
      },
      {
        path: "404",
        name: "404",
        component: () => import("../views/error/error.vue"),
      },
    ],
  },
  {
    path: "/:catchAll(.*)",
    redirect: "/error",
  },
];

const router = createRouter({
  //它在 SEO 中确实有不好的影响。如果你担心这个问题，可以使用 HTML5 模式。
  history: createWebHashHistory(),
  // history: createWebHashHistory(import.meta.env.BASE_URL),

  routes,

  // 注意: 这个功能只在支持 history.pushState 的浏览器中可用。

  // 当创建一个 Router 实例，你可以提供一个 scrollBehavior 方法：
  scrollBehavior(to, from, savedPosition) {
    // return 期望滚动到哪个的位置
    if (savedPosition) return savedPosition;
    else return { left: 0, top: 0 };
    // return { top: 0 };
  },
});

// 你可以使用 router.beforeEach 注册一个全局前置守卫：
router.beforeEach((to, from) => {
  NProgress.start();
  const Dheader = useDheader();
  const Daside = useDaside();
  if (
    from.path == "/" ||
    to.path == "/login" ||
    (from.path == "/login" && to.path == "/home")
  ) {
    Daside.aside.isLoading = true;
  }
  try {
    RouteOrient(Dheader, Daside, to.path);
  } catch (e) {
    return true;
  }
  return true;
});
router.afterEach((to) => {
  NProgress.done();
  const Daside = useDaside();

  //同步导航标题到页面的title
  window.document.title = t(`menu${to.path.split("/").join(".")}`);

  if (Daside.aside.isLoading) {
    setTimeout(() => {
      Daside.aside.isLoading = false;
    }, 1000);
  }
});
router.replace(router.currentRoute.value.fullPath);

export default router;
